<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="email=no" name="format-detection" />
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>
    <meta name="HandheldFriendly" content="true">
    <!--<link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">-->
    <link rel="stylesheet" href="./css/zui-theme.css">
    <link rel="stylesheet" href="./css/zui.lite.min.css">
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="stylesheet" href="./styles/self.css">
    <script src="./js/jquery-3.0.0.js"></script>
    <script src="./js/zui.lite.min.js"></script>
    <!--<script src="./js/bootstrap.js"></script>-->
    <script src="./js/unslider-min.js"></script>
    <script src="./js/jquery.event.swipe.js"></script>
    <title>web</title>
</head>
<body ms-controller="index" ms-css="@bodycss">
    <ms-head></ms-head>
    <!--宣传-->
    <div class="section deleteAdv" ms-if="!@deleteAdv">
        <img src="images/card-amsterdam.png">
        <a href="./active.html"></a>
    </div>
    <!--注册-->
    <!--<div class="section register">
        <div class="cld-1 reghead">
            <h5>注册啥啥</h5>
            <p>
                <a class="btn" ms-on-touchstart="@showRegist" type="button">
                    SHOW
                </a>
            </p>
        </div>
        <div class="cld-1 regist-form" ms-css="@registStatus ? display : block;:display:none;">
            <ul class="list-group">
                <li class="list-group-item-success input-group">
                    <span class="input-group-addon" id="first">
                        <i class="icon-mobile-phone"></i>
                    </span>
                    <input type="text" class="form-control" aria-describedby="first">
                </li>
                <li class="list-group-item-success input-group">
                    <span class="input-group-addon" id="second">
                        <i class="icon-lightbulb"></i>
                    </span>
                    <input type="text" class="form-control" aria-describedby="second">
                </li>
                <li class="list-group-item-success input-group">
                    <span class="input-group-addon" id="third">
                        <i class="icon-adn"></i>
                    </span>
                    <input type="text" class="form-control" aria-describedby="third">
                </li>
                <li class="list-group-item-success input-group">
                    <span class="input-group-addon" id="fourd">
                        <i class="icon-file"></i>
                    </span>
                    <input type="text" class="form-control" aria-describedby="fourd">
                </li>
                <li class="list-group-item-success button">
                    <a ms-on-touchstart="@submitForm" type="button" class="btn btn-warning">
                        提交
                    </a>
                </li>
            </ul>
        </div>
        <div class="cld-1 regfoot">
            <p>反正这是脚</p>
        </div>
    </div>-->
    <!--adv-->
    <div class="section banner">
       <ul id="slide" ms-css="@swipeAdvs">
           <li>
               <a href="#">
                   <img src="./images/card-amsterdam.png" alt="">
               </a>
           </li>
           <li>
               <a href="#">
                   <img src="./images/card-madison.png" alt="">
               </a>
           </li>
           <li>
               <a href="#">
                   <img src="./images/card-saopaolo.png" alt="">
               </a>
           </li>
           <li>
               <a href="#">
                   <img src="./images/card-sf.png" alt="">
               </a>
           </li>
           <li>
               <a href="#">
                   <img src="./images/card-amsterdam.png" alt="">
               </a>
           </li>
           <li>
               <a href="#">
                   <img src="./images/card-madison.png" alt="">
               </a>
           </li>
       </ul>
        <ul id="indition">
            <li style="color: red;">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <!--公告-->
    <div class="section tabsBoard">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active">
                <a href="#No1" aria-controls="No1" role="tab" data-toggle="tab">no1</a>
            </li>
            <li role="presentation">
                <a href="#No2" aria-controls="No2" role="tab" data-toggle="tab">num2</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpane" class="tab-pane active" id="No1">
                <h5>
                    <a href="#">咯咯</a>
                </h5>
                <ul class="list-group">
                    <li class="list-group-item">
                        <i>1</i>
                        <a href="#">测测1</a>
                    </li>
                    <li class="list-group-item">
                        <i>2</i>
                        <a href="#">测试标题2</a>
                    </li>
                    <li class="list-group-item">
                        <i>3</i>
                        <a href="#">测试标题3</a>
                    </li>
                    <li class="list-group-item">
                        <i>4</i>
                        <a href="#">测四</a>
                    </li>
                    <li class="list-group-item">
                        <i>5</i>
                        <a href="#">五</a>
                    </li>
                    <li class="list-group-item">
                        <i>6</i>
                        <a href="#">六</a>
                    </li>
                    <li class="list-group-item">
                        <i>7</i>
                        <a href="#">七</a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane" role="tabpane" id="No2">

            </div>
        </div>
    </div>
    <!--des-->
    <div class="section description">
        <a class="desimg" href="#">
            <img src="./images/card-saopaolo.png">
        </a>
        <ul class="list-group">
            <li class="list-group-item">
                <a href="#">链接</a>
            </li>
            <li class="list-group-item">
                <a href="#">链接</a>
            </li>
            <li class="list-group-item">
                <a href="#">链接</a>
            </li>
            <li class="list-group-item">
                <a href="#">链接</a>
            </li>
        </ul>
    </div>
    <!--about-->
    <div class="section aboutus">
        <h5>关于我们</h5>
        <p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。</p>
    </div>
    <!--connect-->
    <div class="section connect">
        <h5>
            啥啥在线
            <a href="#" class="more-link">
                更多
                <i class="icon-align-right"></i>
            </a>
        </h5>
        <p>
            <span class="cld1">联系方式</span>
            <span class="cld2">110</span>
        </p>
        <p>
            <span class="cld1">联系方式</span>
            <span class="cld2">10001</span>
        </p>
        <p>
            <span class="cld1">联系方式</span>
            <span class="cld2">10086</span>
        </p>
    </div>
    <!--version-->

    <ms-footer></ms-footer>
    <ms-rightnav></ms-rightnav>
    <ms-leftnav></ms-leftnav>
    <ms-backdrop></ms-backdrop>
</body>
<script src="./js/avalon.modern.js"></script>
<script src="./scripts/common.js"></script>
<script src="./scripts/commonwidget.js"></script>
<script>
    $(function () {
       vm = avalon.define({
          $id:'index',
          bodycss:{},
          deleteAdv : true,
          registStatus : false,
          submitForm : function () {},
          swipeAdvs : {width : '100%'},
       });
       avalon.onInit = function (e) {
           console.log(e.vmodel);
       };
       avalon.scan(document.body);
       var bodycss = {};
       //获取视口宽高
       bodycss['width'] = $(window).innerWidth();
       bodycss['height'] = $(window).innerHeight();
       vm.bodycss = bodycss;
       //可隐藏 宣传
       vm.deleteAdv = false;
       //初始化 unslider
       /*$('.banner').unslider({
            speed : 500,
            delay : 500,
            fluid : true
        });*/

       //slider 轮播
        (function () {
            //获取adv数量
            var count = $('#slide').children().length;
            vm.swipeAdvs = { width : count*100+'%' };
            var i = 1;
            var timer1 = setInterval(function () {
                $('#slide').animate({left:(-(i+1) * 100)+'%'},700,function () {
                    if(i < 4){
                        i++;
                    }else{
                        i = 1;
                        $('#slide').css('left','-100%');
                    }
                    $('#indition').children().not($('#indition').children().eq(i - 1)).css('color','black');
                    $('#indition').children().eq(i - 1).css('color','red');
                });
            },2000);
        })();


        /*
        //2 register form 显隐
        vm.showRegist = function () {
            console.log('touch start');
            if(vm.registStatus){
                $('.regist-form').eq(0).slideUp('normal',function () {
                    vm.registStatus = false;
                });
            }else{
                $('.regist-form').eq(0).slideDown('normal',function () {
                    console.log('regist show');
                    vm.registStatus = true;
                });
            }
        };*/

        //3 异步提交
        vm.submitForm = function () {
          console.log('submit form');
          $.post('baidu.com',{
              param1 : 1,
              param2 : 2
          },function (data) {
              console.log(data);
          });
        };
        //滚动监听
        $(window).scroll(function (event) {
        });
    });
</script>
</html>